<template>
  <div class="center-panel-container">
    <div class="tabs-header">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="[
          'tab-button',
          { 'tab-button_active': activeTabIndex === index },
        ]"
        @click="activeTabIndex = index"
      >
        {{ tab.name }}
      </div>
    </div>

    <div class="tab-content">
      <component :is="tabs[activeTabIndex]?.component || 'div'"></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Homeland from './components/Homeland.vue'
import PokemonConsole from './components/PokemonConsole.vue'

const activeTabIndex = ref(0)

const tabs = [
  {
    name: '家园',
    component: Homeland,
  },
  {
    name: '瞭望塔',
    component: PokemonConsole,
  },
]
</script>

<style lang="less" scoped>
@import '@/style/centerPanel.less';
</style>
